$(function () {
    $(".golist").on("click", function () {

        window.location.href = "../list.html"

    })

    getCookie("goods")
    console.log(getCookie("goods"))
    //根据购物车进行数据拼接;
    var id
    $.ajax("../js/list.json")
        .then(function (res) {

            var aCookie = JSON.parse(getCookie("goods"))
            var html = "";

            var input = $(".inp").val()
            for (var i = 0; i < aCookie.length; i++) {

                console.log(aCookie[i].id)
                var num = aCookie[i].num
                id = aCookie[i].id
                // var price=res[id].price;



                html += `

                        <li>
                        <input type="checkbox"  class="chec">
                        <img src="../${res[aCookie[i].id].img}">
                          <span class="shopx">商品信息:${res[aCookie[i].id].ls}</span>
                        <span id="shang">+</span> <input type="text" value="${aCookie[i].num}" id="inp"><span id="xia">-</span>
                         <span class="prc">${res[aCookie[i].id].price}</span>
                         <span class="and">${res[aCookie[i].id].price * num}</span><span class="y">￥</span>
                         <span class="del">删除</span>
                        </li>

                        `
                var naa = 0;
                var pir = 0;
                var lit = $("#ocook li").length

                for (var ti = 0; ti < $("#ocook li").length; ti++) {

                    pir = Number(res[aCookie[i].id].price * num)
                }



                for (var x = 0; x < JSON.parse(getCookie("goods")).length; x++) {
                    naa = naa + Number(JSON.parse(getCookie("goods"))[x].num)



                }

                $(".he").html(naa)






            }
            var j = 1;
            as = 0;


            $(".ocook").stop().on("click", "li #shang", function () {
                var xs = $("#inp").val()

                var val = $(this).next().val()
                var nn = Number(val)

                $(this).next().val(++nn)
                var a = ""
                a = ` <span >${res[id].price * nn}</span>`
                console.log(val)
                console.log(a)
                $(this).parent().children(".and").html(a)
                $(this).parent().children(".and").html(a)
            })
            $(".ocook").stop().on("click", "li #xia", function () {

                var val = $(this).prev().val()
                var nn = Number(val)
                if (nn == 1) {

                } else {
                    $(this).prev().val(nn - j)
                    var a = ""
                    a += ` <span >${res[id].price * (nn - j)}</span>`
                    $(this).parent().children(".and").html(a)
                    console.log($(this).prev().val())
                }

            })





            $(".ocook").html(html);
            $(".ocook li").children().css({ float: "left" })
            $(".ocook").on("click", ".del", function () {
                // console.log($(this).setCookie("goods",-1))
                var acookie = setCookie("goods")
                console.log($(this).parent().acookie)
                console.log(aCookie)
                for (var i = 0; i < aCookie.length; i++) {

                    console.log(aCookie[i].id, -1)
                }
            })



        })



})
$(window).on("load", function () {
    if (getCookie("goods")) {
        $(".goslist").css({
            display: "none"
        })
    } else {
        $(".goslist").css({
            display: "block"
        })
    }
})

$(function () {
    //顶部可关闭图片
    $(".colse").on("click", function () {
        $(".displaylog").css("display", "none");
    })
    //  微信弹出框
    $(".signal").on("mouseover", function () {
        $(".eject").css("display", "block")
    })
    $(".signal").on("mouseout", function () {
        $(".eject").css("display", "none")
    })
    // 导航栏滑动效果
    $(".navright li").on("mouseover", function () {
        $(this).css("color", "#fff")
        $(".num").css("color", "#cecece")
    })
    $(".navright li").on("mouseout", function () {
        $(this).css("color", "#cecece")
        $(".num").css("color", "#cecece")
    })
    $(".articles li").eq(0).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 5
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(1).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 70
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(2).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 145
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(3).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 215
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(4).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 283
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(5).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 355
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".articles li").eq(6).on("mouseover", function () {
        $(".bord").stop().animate({
            width: 60,
            bottom: 20,
            left: 425
        })
    }).on("mouseout", function () {
        $(".bord").stop().animate({
            width: 0,
            bottom: -15,
            left: 0
        })
    })
    $(".row a").on("click", function () {
        window.location.href = "../index.html"
    })
    $(".navright li").eq(1).on("click", function () {
        window.location.href = "../ht/register.html"
    })
    $(".navright li").eq(2).on("click", function () {
        window.location.href = "../ht/land.html"
    })

    // 搜索框特效
    $(".havelist").on("click", function () {
        $(".new li").fadeToggle();
        $(".new li").on("mouseover", function () {
            $(this).css({
                "background": "#cecece",
                "color": "red"
            })
        }).on("mouseout", function () {
            $(this).css({
                "background": "#fff",
                "color": "#cecece"
            })
        })
    })
    $(".havelist").blur(function () {

        setTimeout(function () {
            $(".new li").css({
                display: "none"
            })
        }, 300) //延迟事件，解决失焦事件与按钮事件的冲突
    })
    // 点击获取value
    $(document).ready(function () {
        var li = $(".new li") //获取li
        $(".new li").on("click", function () {
            var index = $(this).index(); //获取下标
            console.log(index)
            var text = li.eq(index).text(); //获取text
            $(".havelist").val(text) //更换text
            console.log(text)
        })
        console.log(li)
    })


})